<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#main {
			width: 1000px;
			border: 1px solid #CCC;
			padding: 5px;
			position: relative;
		}

		.row,
		.row_reverse,
		.column,
		.column_reverse {
			display: flex;
			margin-bottom: 5px;
		}

		.row {
			flex-direction: row;
		}
		.row::after{
			content: 'flex-direction: row';
		}

		.row_reverse {
			flex-direction: row-reverse;
		}
		.row_reverse::before{
			content: 'flex-direction: row-reverse';
		}

		.column {
			flex-direction: column;
		}
		.column::before{
			content: 'flex-direction: column';
		}

		.column_reverse {
			flex-direction: column-reverse;
			position: absolute;
			top: 120px;
			left: 400px;
		}
		.column_reverse::after{
			content: 'flex-direction: column-reverse';
		}

		.row div,
		.row_reverse div,
		.column div,
		.column_reverse div {
			width: 50px;
			height: 50px;
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<div id="main">
		<div class="row">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<div class="row_reverse">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<div class="column">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
		<div class="column_reverse">
			<div>A</div>
			<div>B</div>
			<div>C</div>
			<div>D</div>
			<div>E</div>
		</div>
	</div>
</body>

</html>